<template>
  <header>
    <el-container>
      <!--    侧边栏  -->
      <el-aside :width="asideWidth" style="min-height: 100vh; background-color: #303643">
        <div style="height: 80px; color: white; display: flex; align-items: center; justify-content: center">
          <span class="logo-title" v-show="!isCollapse">您好，活动管理员！</span>
        </div>

        <el-menu :collapse="isCollapse" :collapse-transition="false" router background-color="#303643"
                 text-color="rgba(255, 255, 255, 0.65)" active-text-color="#fff" style="border: none"
                 :default-active="$route.path">
          <el-submenu  index="/main/SchoolLists">
            <template slot="title" >
              <i class="el-icon-menu"></i>
              <span>系统管理</span>
            </template>
            <el-menu-item index="/main/SchoolLists">专业管理</el-menu-item>
          </el-submenu>
        </el-menu>

        <el-menu :collapse="isCollapse" :collapse-transition="false" router background-color="#303643"
                 text-color="rgba(255, 255, 255, 0.65)" active-text-color="#fff" style="border: none"
                 :default-active="$route.path">
          <el-submenu  >
            <template slot="title" >
              <i class="el-icon-menu"></i>
              <span>活动管理</span>
            </template>
            <el-menu-item index="/admin/Activity">活动管理</el-menu-item>
            <el-menu-item index="/admin/AApply">加入活动审核</el-menu-item>
<!--            <el-menu-item index="/main/SchoolLists">活动类型管理</el-menu-item>-->
            <el-menu-item index="/admin/GiveScore">学分发放</el-menu-item>


          </el-submenu>
        </el-menu>

        <!--<el-menu :collapse="isCollapse" :collapse-transition="false" router background-color="#303643"-->
                 <!--text-color="rgba(255, 255, 255, 0.65)" active-text-color="#fff" style="border: none"-->
                 <!--:default-active="$route.path">-->
          <!--<el-submenu  >-->
            <!--<template slot="title" >-->
              <!--<i class="el-icon-menu"></i>-->
              <!--<span>活动管理</span>-->
            <!--</template>-->


            <!--            <el-menu-item index="/main/SchoolLists">测试管理</el-menu-item>-->

<!--          </el-submenu>-->
<!--        </el-menu>-->


        <!--          <el-menu-item index="/Active">-->
        <!--            <i class="el-icon-shopping-cart-2"></i>-->
        <!--            <span slot="title">活动管理</span>-->
        <!--          </el-menu-item>-->
        <!--          <el-menu-item index="/admin/Tribe">-->
        <!--            <i class="el-icon-house"></i>-->
        <!--            <span slot="title">部落管理</span>-->
        <!--          </el-menu-item>-->



      </el-aside>

      <el-container>

        <el-header>
          <header class="header">
            <div class="logo">
              <i :class="collapseIcon" class="collapse-icon" @click="handleCollapse"></i>
              <span class="logo-text">微讯校园后台管理系统</span>
            </div>
            <div class="user-info">
              <el-dropdown class="dropdown">
                <i class="el-icon-arrow-down dropdown-icon"></i>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item @click.native="logout">退出登录</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </div>
          </header>
        </el-header>

        <el-main>
          <router-view/>
        </el-main>
      </el-container>
    </el-container>
  </header>
</template>

<script>
export default {
  name: "Druginfor",
  data() {
    return {
      isCollapse: false,  // 不收缩
      asideWidth: '200px',
      collapseIcon: 'el-icon-s-fold',
      imgPrex: 'http://localhost:9999/',
      user: JSON.parse(localStorage.getItem('CurUser')),
      dropdownItems: [
        {label: '退出登录', handler: this.logout}
      ]
    }
  },
  props: {
    icon: String
  },
  methods: {
    handleCollapse() {
      this.isCollapse = !this.isCollapse
      this.asideWidth = this.isCollapse ? '64px' : '200px'
      this.collapseIcon = this.isCollapse ? 'el-icon-s-unfold' : 'el-icon-s-fold'
    },
    toUser() {
      console.log('to_user')
      //this.$router.push("/userHome")
    },

    logout() {
      console.log('logout')
      this.$confirm('您确定要退出登录吗?', '提示', {
        confirmButtonText: '确定',  //确认按钮的文字显示
        type: 'warning',
        center: true, //文字居中显示
      })
          .then(() => {
            this.$axios.post("/admin/logout").then(resp=>{

            })
            this.$message({
              type: 'success',
              message: '退出登录成功'
            })
            this.$router.push("/admin/login")
            sessionStorage.removeItem("token")
            sessionStorage.removeItem("admin")
            sessionStorage.removeItem("uId")
          })
          .catch(() => {
            this.$message({
              type: 'info',
              message: '已取消退出登录'
            })
          })

    },
  }

}
</script>

<style scoped>

.el-aside {
  transition: width .3s;
  box-shadow: 2px 0 6px rgba(0, 21, 41, .35);
}


.el-main {
  background-color: #E9EEF3;
  color: #333;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  background-color: #fdfdfe;
}

.logo {
  display: flex;
  align-items: center;
}

.collapse-icon {
  font-size: 26px;
  margin-right: 10px;
  cursor: pointer;
}

.logo-text {
  font-size: 24px;
  margin-left: 400px;
}

.user-info {
  display: flex;
  align-items: center;
}

.user-avatar {
  width: 40px;
  height: 40px;
  object-fit: cover;
  border-radius: 50%;
  margin-right: 10px;
}

.dropdown {
  position: relative;
}

.user-name {
  margin-right: 5px;
}

.dropdown-icon {
  font-size: 20px;
}

</style>
